import React, { useEffect, useState } from 'react';

import { message, Modal, Transfer } from 'antd';

interface AddIndexModelProps {
  visible: boolean;
  onCancel: () => void;
  onSure: (values: string[]) => void;
  widgets: { widgetId: number, widgetName: string }[];
}

const AddModel: React.FC<AddIndexModelProps> = (props) => {
  const { visible, onCancel, widgets, onSure } = props;
  const [selectWidgets, setSelectWidgets] = useState<string[]>([]); // 选择的指标
  const [transferDatas, setTransferDatas] = useState<{ key: string; title: string }[]>([]);

  useEffect(() => {
    setTransferDatas(widgets.map(v => ({
      key: String(v.widgetId),
      title: v.widgetName,
    })));
  }, [widgets]);
  // 选择指标
  const handleChange = (value: Array<string>) => {
    setSelectWidgets(value);
  };

  // 存储添加的指标
  const establish = () => {
    if (selectWidgets.length === 0) {
      message.warning('请选择需要添加的指标');
      return;
    }
    const chooseWidgets = [...widgets.map(w => w.widgetId), ...selectWidgets];
    onSure(selectWidgets);
    console.log('chooseWidgets', chooseWidgets);
  };


  return (
    <Modal
      title='添加分组指标'
      width={470}
      destroyOnClose
      visible={visible}
      onOk={establish}
      onCancel={() => {
        onCancel();
      }}
    >
      <Transfer
        listStyle={{
          width: 188,
          height: 380,
        }}
        dataSource={transferDatas}
        titles={['看板指标', '分组指标']}
        targetKeys={selectWidgets}
        onChange={handleChange}
        render={(item: any) => item.title}
      />
    </Modal>
  );
};

export default AddModel;
